// 切换两个盒子
// 点击login里的a链接，让自己隐藏，下一级注册register的盒子出现
$('.login a').on('click',function(){
$('.login').hide().next().show()
}) 
 $('.register a').click(function () {
  $('.register').hide();
}); 

// 注册功能
$('.register form').on('submit',function(e){
//1. 禁止默认行为
e.preventDefault()
// 2.收集表单数据（注意检查name的属性值，是否与接口文档要求的一致）
let data = $(this).serialize()
console.log(data);
$.ajax({
  type : 'POST',
  url : 'http://www.itcbc.com:8080/api/reguser',
  data : data,
  success : function(res) {
    
    // 无论成功还是失败都提示一下
    layer.msg(res.message);
    
    // 如果成功了，清空输入框，切换到登录的盒子
    if (res.status === 0){
      layer.msg(res.message);
      $('.register form')[0].reset();/* 清空输入框  reset为重置*/
      $('.login').show().next().hide()
    }
  }
})
})

// 自定义验证方法
// 1.加载form 模块（语法 ： let 变量 = layui.模块名）
 let form = layui.form;
// 2.调用form.verify()  扩展自己的验证规则
form.verify({
  // 键（规则名称）：值（验证的方法）
  // 1.数组的写法
  // 规则名称：['正则表达式','不满足正则的提示']
  username:[/^\w{2,10}$/,'用户名必须是2~10位'],
  password:[/^\S{6,12}$/, '密码6~12位且不能有空格'],
  same : function(val) {
   // 形参，表示使用该验证规则的输入框的值（谁用这个验证规则，val表示谁的值）
   // 案例中，重复密码使用了这个验证规则，所以形参val表示输入的重复密码
    if (val !== $('.password').val()) {
      return '两次密码不一致'
    }
  }
}) 



// 登录功能

// 表单提交事件--阻止默认行为--收集数据--ajax提交
$('.login form').on('submit',function(e){
// 1.阻止默认行为
e.preventDefault()

// 2.收集表单数据（注意检查name的属性值，是否与接口文档要求的一致）
let data = $(this).serialize()

// 3.ajax提交
$.ajax({
  type:'POST',
  data: data,
  url:'http://www.itcbc.com:8080/api/login',
  success : function(result){
  // 内置模块 -- 弹出层 -- msg提示   layer.msg('');
  // layer.msg('result.message');
  // console.log(result);
  //判断，如果status=0，则跳转至新的页面。不是，则提示用户名或密码错误
  if (result.status !== 0) {
    alert('用户名或密码错误')
  } else {
    layer.msg('登录成功', {
      icon: 1,
      time: 2000 //2秒关闭（如果不配置，默认是3秒）
    }, function(){
      //do something
      console.log(result);
      // 在本地存储token 
      // local 英[ˈləʊkl] 本地
      // storage	英[ˈstɔːrɪdʒ] 存储
      // localstorage  本地存储
      localStorage.setItem('token',result.token)
      location.href = './index.html'
    });
  }
  }
})
})
